<template>
	<view>
		<view class="list">
			<view class="item" v-for="(item, index) in follwInfoList" :key="index">
				<view class="title">
					{{ item.createtime }} 操作人：{{ item.worker_name }}
				</view>
				<view class="content">
					<TextOverflow
						:line="2"
						:dt="item.remark"
						expandText="...展开"
						foldHint="收起"
					/>
					<view class="imgs" v-if="item.file_url">
						<image
							v-for="(url, index) in item.file_url"
							:src="url"
							:key="index"
							mode=""
						/>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import TextOverflow from "@/components/text-over-flow/text-over-flow.vue";

export default {
	props: {
		follwInfoList: {
			type: Array,
			default: [],
		},
	},
	components: {
		TextOverflow,
	},
	data() {
		return {
			content:
				"有时候需要展示的内容是从后端获取的，组件内部的mounted生命周期初始化时，请求尚未回来，会导致 内容的高度在初始化有误差。可以在请求完毕渲染后(指的是this.$nextTick)，通过ref调用组件的init方法，重新初始化",
		};
	},
	methods: {},
};
</script>
<style lang="scss" scoped>
.list {
	.item::before {
		content: "";
		display: inline-block;
		width: 12rpx;
		height: 12rpx;
		border-radius: 50%;
		background: #9999a5;
		position: absolute;
		left: -40rpx;
		top: 15rpx;
	}
	.item::after {
		content: "";
		display: inline-block;
		width: 2rpx;
		height: 100%;
		background: #9999a5;
		position: absolute;
		left: -37rpx;
		top: 15rpx;
	}
	.item {
		position: relative;
		width: calc(100% - 40rpx);
		margin-left: 40rpx;
		padding-bottom: 40rpx;
		.title {
			color: #9999a5;
		}
		.content {
			background: #f6f6f7;
			border-radius: 8rpx;
			padding: 16rpx;
			margin-top: 8rpx;
			.imgs {
				image {
					width: 120rpx;
					height: 120rpx;
					margin-right: 12rpx;
					margin-top: 12rpx;
				}
			}
		}
	}
}
</style>
